<script>
import worldData from "../assets/world1.json";
import $ from "jquery";

export default {
  render: function(createElement) {
    return createElement("div", {
      attrs: {
        id: "worldMap"
      },
      style: {
        height: "600px"
      }
    });
  },
  data() {
    return {
      worldData
    };
  },
  methods: {
    initWorldMap() {
      
      $.get("https://api.yonyoucloud.com/apis/dst/ncov/wholeworld", function(
        data,
        status
      ) {
        //处理数据
        var arr = [];
        // 处理数据，成地图需要的数据结构
        data.results.forEach(item => {
          // 循环的过程中，向空数组中加入所需的内容
          if (item.worldData == item.provinceName) {
            //这个判断是因为，这个数据还统计了中国省份和城市的数据，所以这个条件用于判断这个元组是否为国家的数据
            arr.push({
              name: item.provinceName, // name固定
              value: item.confirmedCount, // value固定
              nowconfirm: item.confirmedCount, // 当前确诊
              heal: item.curedCount, //治愈数
              dead: item.deadCount, //死亡数
              CName: item.provinceName //国家的中文名字
            });
          }
        });
        //统一替换名称不匹配的问题
        arr.forEach(item => {
          if (item.name == "United States of America") {
            item.name = "United States";
          } else if (item.name == "The Islamic Republic of Mauritania") {
            item.name = "Mauritania";
          } else if (item.name == "Kazakstan") {
            item.name = "Kazakhstan";
          } else if (item.name == "Somali") {
            item.name = "Somalia";
          } else if (item.name == "Central African Republic") {
            item.name = "Central African Rep.";
          } else if (item.name == "Papua New Cuinea") {
            item.name = "Papua New Guinea";
          } else if (item.name == "Burma") {
            item.name = "Myanmar";
          } else if (item.name == "Kampuchea (Cambodia )") {
            item.name = "Cambodia";
          } else if (item.name == "Laos") {
            item.name = "Lao PDR";
          } else if (item.name == "SriLanka") {
            item.name = "Sri Lanka";
          } else if (item.name == "Kingdom of Bhutan") {
            item.name = "Bhutan";
          } else if (item.name == "Republic of Serbia") {
            item.name = "Serbia";
          } else if (item.name == "Bosnia and Herzegovina") {
            item.name = "Bosnia and Herz.";
          } else if (item.name == "Democratic Republic of the Congo") {
            item.name = "Dem. Rep. Congo";
          } else if (item.name == "North Macedonia") {
            item.name = "Macedonia";
          } else if (item.name == "Ivory Coast") {
            item.name = "Côte d'Ivoire";
          } else if (item.CName == "赞比亚共和国") {
            item.name = "Zambia";
          } else if (item.CName == "几内亚比绍") {
            item.name = "Guinea-Bissau";
          } else if (item.CName == "刚果（布）") {
            item.name = "Congo";
          } else if (item.CName == "厄立特里亚") {
            item.name = "Eritrea";
          } else if (item.CName == "黑山") {
            item.name = "Montenegro";
          } else if (item.CName == "吉尔吉斯斯坦") {
            item.name = "Kyrgyzstan";
          }else if (item.CName == "格陵兰") {
            item.name = "Greenland";
          }else if (item.CName == "也门共和国") {
            item.name = "The Republic of Yemen";
          }
        });
        // 绘制图表
        var worldChart = echarts.init(document.getElementById("worldMap"));
        let option = {
          // backgroundColor: "#02AFDB",//背景
          title: {
            textStyle: {
              fontSize: 28
            },
            subtextStyle: {
              fontSize: 14,
              top: "10px"
            }
          },
          visualMap: [
            {
              type: "piecewise",
              seriesIndex: 0,
              pieces: [
                { gt: 100000 }, // 大于10000
                { gt: 50000, lte: 100000 },
                { gt: 10000, lte: 50000 },
                { gt: 5000, lte: 10000 },
                { gt: 1000, lte: 5000 },
                { gt: 100, lte: 1000 }, // (200, 300]
                { gt: 0, lte: 100 }
              ],
              inRange: {
                color: [
                  "#ffcfc3",
                  "#eda595",
                  "#d27b64",
                  "#d5462a",
                  "#a8352e",
                  "#6a211d",
                  "#562a2a"
                ]
              },
              left: 10,
              bottom: 20,
              textStyle: {
                color: "#000"
              }
            }
          ],
          toolbox: {
            //工具栏
            show: false,
            orient: "vertical",
            top: 50,
            itemGap: 20,
            left: 30,
            feature: {
              dataView: { readOnly: false },
              restore: {},
              saveAsImage: {}
            }
          },
          tooltip: {
            // 鼠标悬浮提示
            formatter: function(params) {
              // 允许我们自定义悬浮提示的内容
              // return 需要提示的内容
              return `国家：${params.data.CName}<br/>
                        累计确诊：${params.data.value}<br/>
                        当前确诊：${params.data.nowconfirm}<br/>
                        治愈：${params.data.heal}<br/>
                        死亡：${params.data.dead}<br/>
                        `;
            }
          },
          series: [
            {
              type: "map",
              map: "world", // 指定是世界地图
              data: arr, // 设置地图中的数据
              label: {
                // 不显示国家的名字
                show: false
              },
              showLegendSymbol: false
            }
          ]
        };
        worldChart.setOption(option);
        worldChart.on("click", function(params) {
          alert(params.name);
        });
      });
    }
  },
  mounted() {
    //绘制地图
    this.initWorldMap();
  }
};
</script>
